describe('Vue 3 + Apollo Composable', () => {
  beforeEach(() => {
    cy.task('db:reset')
    cy.visit('/')
  })

  it('loads channels', () => {
    cy.contains('#app', 'Loading channels...')
    cy.get('.channel-link').should('have.lengthOf', 2)
    cy.contains('.channel-link', '# General')
    cy.contains('.channel-link', '# Random')
  })

  it('load one channel', () => {
    cy.get('.channel-link').eq(0).click()
    cy.contains('#app', 'Currently viewing # General')
  })

  it('sends a message', () => {
    cy.get('.channel-link').eq(0).click()
    cy.get('input').type('Hello{enter}')
    cy.get('.message').should('have.lengthOf', 1)
    cy.contains('.message', 'Hello')
    cy.get('input').should('have.value', '')
    cy.get('.channel-link').eq(1).click()
    cy.get('.message').should('have.lengthOf', 0)
    cy.reload()
    cy.get('.channel-link').eq(0).click()
    cy.get('.message').should('have.lengthOf', 1)
    cy.contains('.message', 'Hello')
  })

  it('sends multiple messages', () => {
    cy.get('.channel-link').eq(1).click()
    cy.get('input').type('Message 1{enter}')
    cy.contains('.message', 'Message 1')
    cy.get('input').should('have.value', '')
    cy.get('input').type('Message 2{enter}')
    cy.get('input').should('have.value', '')
    cy.contains('.message', 'Message 2')
    cy.get('input').type('Message 3{enter}')
    cy.get('input').should('have.value', '')
    cy.contains('.message', 'Message 3')
    cy.get('.message').should('have.lengthOf', 3)
    cy.get('input').should('have.value', '')
    cy.get('.channel-link').eq(0).click()
    cy.get('.message').should('have.lengthOf', 0)
    cy.reload()
    cy.get('.channel-link').eq(1).click()
    cy.contains('.loading-channel', 'Loading channel...')
    cy.get('.message').should('have.lengthOf', 3)
    cy.contains('.message', 'Message 1')
    cy.contains('.message', 'Message 2')
    cy.contains('.message', 'Message 3')
  })

  it('refetch', () => {
    cy.get('.channel-link').eq(0).click()
    cy.get('input').type('Message 1{enter}')
    cy.get('input').should('have.value', '')
    cy.get('input').type('Message 2{enter}')
    cy.get('input').should('have.value', '')
    cy.get('input').type('Message 3{enter}')
    cy.get('input').should('have.value', '')
    cy.get('[data-test-id="refetch"]').click()
    cy.contains('.loading-channel', 'Loading channel...')
    cy.get('.message').should('have.lengthOf', 3)
    cy.contains('.message', 'Message 1')
    cy.contains('.message', 'Message 2')
    cy.contains('.message', 'Message 3')
    cy.task('db:reset')
    cy.get('[data-test-id="refetch"]').click()
    cy.contains('.loading-channel', 'Loading channel...')
    cy.get('.message').should('have.lengthOf', 0)
  })

  it('enabled', () => {
    cy.visit('/disabled')
    cy.get('[data-test-id="data"]').should('not.exist')
    cy.get('.loading').should('not.exist')
    cy.get('button').click()
    cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
  })

  it('onResult with immediate result', () => {
    cy.visit('/on-result')
    cy.get('[data-test-id="data"]').should('not.exist')
    cy.get('input[type="checkbox"]').click()
    cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
    cy.get('input[type="checkbox"]').click()
    cy.get('[data-test-id="data"]').should('not.exist')
    cy.get('input[type="checkbox"]').click()
    cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
  })

  it('global loading', () => {
    cy.get('[data-test-id="global-loading"]').should('contain', 'Global loading...')
    cy.get('.channel-link').should('have.lengthOf', 2)
    cy.get('[data-test-id="global-loading"]').should('not.contain', 'Global loading...')
    cy.get('.channel-link').eq(0).click()
    cy.get('[data-test-id="global-loading"]').should('contain', 'Global loading...')
    cy.contains('#app', 'Currently viewing # General')
    cy.get('[data-test-id="global-loading"]').should('not.contain', 'Global loading...')
    cy.get('.channel-link').eq(1).click()
    cy.get('[data-test-id="global-loading"]').should('contain', 'Global loading...')
    cy.contains('#app', 'Currently viewing # Random')
    cy.get('[data-test-id="global-loading"]').should('not.contain', 'Global loading...')
    cy.get('.channel-link').eq(0).click()
    cy.get('[data-test-id="global-loading"]').should('not.contain', 'Global loading...')
    cy.contains('#app', 'Currently viewing # General')
  })
})
